<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            //元素dom
            // document.getElementById();
            // document.getElementsByClassName();
            // document.getElementsByTagName();
            // document.getElementsByName();
            

            // document.querySelector();对象
            // document.querySelectorAll();数组

            // var li=document.querySelector("#li1");
            // li.parentElement.style.color="red";
            // console.log(li.parentElement); null
            // console.log(li.parentNode);文档节点  #document

            // var ul=document.querySelector("ul");
            // ul.childNodes 文本节点
            // ul.children  获取元素 不包括文本节点
            // ul.childNodes

            //兄弟节点
            // var li=document.querySelector("#li1");
            // li.nextElementSibling();获取下一个元素节点
            // li.previousElementSibling;获取上一个元素节点
            // li.previousSibling; #text 文本节点
            // li.nextSibling(); #text 文本节点


            //样式
            // var li=document.querySelector("#li1");
            // li.style.color="red";
            // li.style.background-color="#ccc"; 
            // li.style.backgroundColor="#ccc"; 驼峰命名法
            // li.style.["background-color"]="#ccc";数组命名法 

            //属性 attributes 属性返回指定节点属性的集合
            // console.log(li.id);
            // console.log(li.className);
            // console.log(li.attributes["data-id"]);  获取属性
            // console.log(li.attributes["data-id"].value);  获取属性值
            // console.log(li.attributes["data-id"].name);  获取属性名

            //*click  点击
            //*change 改变 单选，多选状态改变的时候  下拉框选项改变的时候  文本框的值改变的时候   会触发
            //*mouseover 鼠标事件 
            //*mouseout
            //keydown 键盘事件
            //*keypress
            //keyup

            // var btn=document.querySelector("button");
            // btn.onclick=function(){
            //     // console.log(this.value); 交互控件的值
            // }
            // var li=document.querySelector("#li1");
            // li.onclick=function(){
            //     // console.log(this.innerText); 获取text
            //     // console.log(this.innerHTML); 获取html
            //     // console.log(this.outerHTML);含有本身标签
            // }

            var select=document.querySelector("select");
            // select.onclick=function(){
            //     conlose.log(this.value);
            // }
                select.onchange=function(){
                    console.log(this.value);
                }
        }
    </script>
</head>
<body>
    <!-- <ul>
        <li id="li1" class="li" data-id="0">列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul> -->
    <!-- <button value="click">单击</button> -->
    <!--  size="1" 默认是1 小于1 显示至少是1个
     size="1" multiple  多选
    -->
    <select name="" id="">
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
    </select>
</body>
</html>